<template>
  <div>
    <h2>Game</h2>
     <!-- 
    动态路由: 我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件
    动态路由主要是通过两种传参方式来实现的
      1. params传参
        - 直接在路由路径后拼接参数,并且需要路由表中配合
        - 在路由表中还可以配置哪些参数是可选的
        - 我们to写成对象写法也可以进行传递parmas参数
          * 注意:params参数只能和name配合使用,不能和path配合使用
          * 注意:params某个参数如果可选,则不能传递空字符串,可以写为null
      2. query传参

     -->
    <router-link tag="strong" to="/home/game/item/001/cs?age=12">CS1.4简介</router-link>

    <router-link tag="strong" 
      :to="{
        name: 'GameItem',
        params: {
          id: '002',
          title: 'dnf',
        },
        query:{
          age:18
        }
      }">DNF简介</router-link>

    <!-- 把这里的title配置成这样，则title可写可不写 -->
    <router-link tag="strong" :to="{
        name: 'GameItem',
        params: {
          id: '003',
        },
        query:{
          age:24
        }
      }">LOL简介</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Game",
  mounted() {
    console.log("Game-mounted");
  },
};
</script>

<style></style>
